<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useHomeStore } from '@/stores/module/home'
import router from '@/router'
const homeStore = useHomeStore() // 创建store实例
const { homeTableCoreDealers } = storeToRefs(homeStore)

let tableLabel = [
  {
    label: homeTableCoreDealers.value.info[0].distributor_id_desc,
    prop: 'distributor_id',
  },
  {
    label: homeTableCoreDealers.value.info[0].nation_id,
    prop: 'nation_id_desc',
  },
  {
    label: homeTableCoreDealers.value.info[0].distributor_name_desc,
    prop: 'distributor_name',
  },
  {
    label: homeTableCoreDealers.value.info[0].xj_desc,
    prop: 'xj',
  },
  {
    label: homeTableCoreDealers.value.info[0].xj_rx_desc,
    prop: 'xj_rx',
  },
]
// 跳转到经销商详情
const clickDealer = (row) => {
  router.push({
    path: '/dealer-data',
    query: {
      uid: encodeURIComponent(row.distributor_id_encryption),
    },
  })
}
</script>

<template>
  <div>
    <div class="ti-hx">
      <span>{{ homeTableCoreDealers.title }}</span>
    </div>

    <el-table
      v-if="homeTableCoreDealers.info.length > 0"
      :data="homeTableCoreDealers.info"
      class="table-ex"
      border
      height="450px"
      :header-cell-style="{
        background: 'rgba(10, 22, 97, 0.5)',
        color: 'rgb(0,246,250)',
        border: 'rgb(40, 118, 193) 1px solid',
        textAlign: 'center',
        fontSize: '12px',
        padding: '0',
      }"
      @row-click="clickDealer"
    >
      <el-table-column
        v-for="(item, index) in tableLabel"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="index === 2 ? '328px' : ''"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-table--border) {
  border: 1px solid rgb(93, 245, 243) !important;
  --el-table-border-color: none;
}
:deep(.el-table--border td, .el-table th, .el-table tr) {
  border: 1px solid rgb(93, 245, 243) !important;
  border-collapse: collapse;
  background-color: rgba(10, 22, 97, 0.5) !important ;
}
:deep(.el-table) {
  background-color: transparent; //主体框透明透明
  border-bottom: none;
}

:deep(.el-table tr) {
  background-color: transparent !important; //每一行透明
  color: rgb(93, 245, 243) !important;
}

:deep(.el-table--enable-row-transition .el-table__body td, .el-table .cell) {
  font-size: 12px;
  text-align: center;
  background-color: transparent; //每一行的单元格透明
}

:deep(.el-table::before) {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

:deep(.el-dialog__body) {
  padding: 10px 20px !important;
  font-size: 14px;
  word-break: break-all;
}

:deep(.el-dialog__body) {
  padding: 0;
}

.ti-hx {
  width: 100%;
  height: 50px;

  color: rgb(93, 245, 243);
  font-size: 20px;
  text-align: center;
}
</style>
